<div class="sidebar">
  <ul class="server-list">
    <li ng-repeat="connection in activeConnections | orderBy : 'name'">
      <span class="no-select" ng-click="openConnection(connection)" ng-right-click="openConnectionContextMenu(connection)">
        <i class="icon-server"></i> {{ connection.name }}<i class="open-icon" ng-class="{ 'icon-minus' : connection.isOpen, 'icon-plus' : !connection.isOpen }"></i>
      </span>
      <ul class="database-list slide" ng-show="connection.isOpen">
        <li ng-repeat="database in connection.databases">
          <span class="level-2 no-select" ng-click="openDatabase(database, connection)" ng-right-click="openDatabaseContextMenu(database, connection)">
            <i class="fa fa-database"></i> {{ database.name }}<i class="open-icon" ng-class="{ 'icon-minus' : database.isOpen, 'icon-plus' : !database.isOpen }"></i>
            <span class="loader" ng-show="database.opening">
              <i class="fa fa-cog fa-spin"></i>
            </span>
          </span>
          <ul class="collection-list slide" ng-show="database.isOpen">
            <li>
              <span class="level-3 no-select" ng-click="openCollections(database)" ng-right-click="openDatabaseCollectionFolderContextMenu(database, connection)">
                <i class="fa " ng-class="{ 'fa-folder-o' : !database.showCollections, 'fa-folder-open-o' : database.showCollections }"></i> Collections<i class="open-icon" ng-class="{ 'icon-minus' : database.showCollections, 'icon-plus' : !database.showCollections }"></i>
                <span class="loader" ng-show="database.loadingCollections">
                  <i class="fa fa-cog fa-spin"></i>
                </span>
              </span>
              <ul class="collection-list slide" ng-show="database.showCollections && !database.loadingCollections">
                <li ng-repeat="collection in database.collections | orderBy : 'name'" ng-right-click="openDatabaseCollectionContextMenu(collection, database)">
                  <span class="level-4 no-select collection clearfix" ng-click="activateItem(collection, 'query')" ng-class="{ active : collection.active }" uib-tooltip="{{ collection.name }}" tooltip-placement="right" tooltip-popup-delay="800" tooltip-append-to-body="true">
                    <i class="fa fa-files-o collection-icon"></i>
                    <span class="collect-name">
                      {{ collection.name }}
                    </span>
                  </span>
                </li>
              </ul>
            </li>
            <!-- <li>
              <span class="level-3">
                <i class="fa fa-folder-o"></i> Functions
              </span>
            </li>
            <li>
              <span class="level-3">
                <i class="fa fa-folder-o"></i> Users
              </span>
            </li> -->
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
